<template>
  <div class="business-trip-container">
    <div class="biz-header">
      <img class="biz-logo" src="https://cdn-icons-png.flaticon.com/512/201/201623.png" />
      <span class="biz-title">出差管理</span>
    </div>
    <div class="toolbar">
      <el-button type="primary" @click="handleAdd">新增出差申请</el-button>
      <el-select v-model="status" placeholder="状态筛选" style="margin-left: 10px" @change="handleStatusChange">
        <el-option label="全部" value=""></el-option>
        <el-option label="待审批" value="pending"></el-option>
        <el-option label="已通过" value="approved"></el-option>
        <el-option label="已拒绝" value="rejected"></el-option>
      </el-select>
    </div>

    <el-table :data="filteredTripList" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="employeeName" label="申请人"></el-table-column>
      <el-table-column prop="department" label="部门"></el-table-column>
      <el-table-column prop="destination" label="目的地"></el-table-column>
      <el-table-column prop="startDate" label="开始日期"></el-table-column>
      <el-table-column prop="endDate" label="结束日期"></el-table-column>
      <el-table-column prop="days" label="天数"></el-table-column>
      <el-table-column prop="reason" label="出差事由"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag :type="getStatusType(scope.row.status)">
            {{ getStatusText(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="success" @click="handleApprove(scope.row)" v-if="scope.row.status === 'pending'">审批</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增/编辑对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
      <BaseForm :model="form" :rules="rules" ref="form" label-width="100px">
        <el-form-item label="申请人" prop="employeeId">
          <el-select v-model="form.employeeId" placeholder="请选择申请人" @change="handleEmployeeChange">
            <el-option
              v-for="item in employees"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门" prop="department">
          <el-input v-model="form.department" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="目的地" prop="destination">
          <el-input v-model="form.destination"></el-input>
        </el-form-item>
        <el-form-item label="开始日期" prop="startDate">
          <el-date-picker
            v-model="form.startDate"
            type="date"
            placeholder="选择开始日期"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期" prop="endDate">
          <el-date-picker
            v-model="form.endDate"
            type="date"
            placeholder="选择结束日期"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="出差事由" prop="reason">
          <el-input type="textarea" v-model="form.reason"></el-input>
        </el-form-item>
      </BaseForm>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 审批对话框 -->
    <el-dialog title="出差审批" :visible.sync="approveDialogVisible">
      <el-form :model="approveForm" ref="approveForm" label-width="100px">
        <el-form-item label="审批结果" prop="result">
          <el-radio-group v-model="approveForm.result">
            <el-radio label="approved">通过</el-radio>
            <el-radio label="rejected">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审批意见" prop="comment">
          <el-input type="textarea" v-model="approveForm.comment"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="approveDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitApprove">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import FeatureHeader from '@/components/FeatureHeader.vue'
import BaseTable from '@/components/BaseTable.vue'
import BaseForm from '@/components/BaseForm.vue'
import { mapState, mapActions } from 'vuex'
export default {
  name: 'BusinessTripList',
  components: { FeatureHeader, BaseTable, BaseForm },
  data() {
    return {
      status: '',
      dialogVisible: false,
      approveDialogVisible: false,
      dialogTitle: '新增出差申请',
      form: {
        employeeId: '',
        employeeName: '',
        department: '',
        destination: '',
        startDate: '',
        endDate: '',
        reason: '',
        status: 'pending'
      },
      approveForm: {
        result: 'approved',
        comment: ''
      },
      rules: {
        destination: [{ required: true, message: '请输入目的地', trigger: 'blur' }],
        startDate: [{ required: true, message: '请选择开始日期', trigger: 'change' }],
        endDate: [{ required: true, message: '请选择结束日期', trigger: 'change' }],
        reason: [{ required: true, message: '请输入出差事由', trigger: 'blur' }]
      },
      loading: true,
      editMode: false,
      currentApprovingTripId: null
    }
  },
  computed: {
    ...mapState({
      tripList: state => state.businessTrip.list,
      allEmployees: state => state.employee.list
    }),
    filteredTripList() {
      if (!this.status) return this.tripList
      return this.tripList.filter(item => item.status === this.status)
    },
    employees() {
      return this.allEmployees.map(emp => ({ value: emp.id, label: emp.name }));
    }
  },
  created() {
    this.fetchList()
    this.fetchEmployeeList()
    setTimeout(() => { this.loading = false }, 1000)
  },
  methods: {
    ...mapActions({
      fetchList: 'businessTrip/fetchList',
      fetchEmployeeList: 'employee/fetchList',
      addTrip: 'businessTrip/addTrip',
      editTrip: 'businessTrip/editTrip',
      deleteTrip: 'businessTrip/deleteTrip',
      approveTrip: 'businessTrip/approveTrip'
    }),
    handleStatusChange() {},
    getStatusType(status) {
      const types = {
        pending: 'warning',
        approved: 'success',
        rejected: 'danger'
      }
      return types[status] || 'info'
    },
    getStatusText(status) {
      const texts = {
        pending: '待审批',
        approved: '已通过',
        rejected: '已拒绝'
      }
      return texts[status] || status
    },
    handleAdd() {
      this.dialogTitle = '新增出差申请'
      this.editMode = false
      this.form = {
        employeeId: '',
        employeeName: '',
        department: '',
        destination: '',
        startDate: '',
        endDate: '',
        reason: '',
        status: 'pending'
      }
      this.dialogVisible = true
    },
    handleEdit(row) {
      this.dialogTitle = '编辑出差申请'
      this.editMode = true
      this.form = { ...row }
      this.dialogVisible = true
    },
    handleDelete(row) {
      this.$confirm('确认删除该出差申请?', '提示', {
        type: 'warning'
      }).then(() => {
        this.deleteTrip(row.id)
        this.$message.success('删除成功')
      })
    },
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const employee = this.allEmployees.find(emp => emp.id === this.form.employeeId);
          if (employee) {
            this.form.employeeName = employee.name;
            this.form.department = employee.department;
          }
          if (this.form.startDate && this.form.endDate) {
            const start = new Date(this.form.startDate);
            const end = new Date(this.form.endDate);
            const diffTime = Math.abs(end - start);
            const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
            this.form.days = diffDays + 1;
          }
          if (this.editMode) {
            this.editTrip({ ...this.form })
            this.$message.success('编辑成功')
          } else {
            this.addTrip({ ...this.form })
            this.$message.success('新增成功')
          }
          this.dialogVisible = false
        }
      })
    },
    handleApprove(row) {
      this.currentApprovingTripId = row.id;
      this.approveForm = { result: 'approved', comment: '' }
      this.approveDialogVisible = true
    },
    submitApprove() {
      if (this.currentApprovingTripId) {
        this.approveTrip({
          id: this.currentApprovingTripId,
          status: this.approveForm.result
        });
        this.$message.success('审批成功');
        this.approveDialogVisible = false;
        this.currentApprovingTripId = null;
      }
    },
    handleEmployeeChange(id) {
      const emp = this.allEmployees.find(e => e.id === id);
      if (emp) {
        this.form.department = emp.department || '';
      }
    }
  }
}
</script>

<style scoped>
.business-trip-container {
  padding: 20px;
}

.biz-header {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}
.biz-logo {
  width: 36px;
  height: 36px;
  margin-right: 12px;
}
.biz-title {
  font-size: 22px;
  font-weight: bold;
  color: #222;
  letter-spacing: 2px;
}
.toolbar {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}
</style> 